import React, { PureComponent } from 'react';
import Item from './Item';
import { connect } from 'react-redux';
import SelectGroup from '../../components/SelectGroup/index';
import './style.styl';

const getFilterLength = (key, arr) => keyword => {
    const filterArr = arr.filter(item => item[key] === keyword);
    return filterArr.length;
};

@connect(({ agent, loading }) => ({
    ...agent,
    isLoad: loading.effects['agent/getList']
}))
export default class Agent extends PureComponent {
    state = {
        searchValue: '',
        filterType: 'all',
        layoutType: 'list'
    };
    componentDidMount() {
        this.getList();
    }

    getList() {
        this.props.dispatch({
            type: 'agent/getList'
        });
    }

    getFliterList(value) {
        if (value === 'all') {
            this.getList();
        } else {
            this.props.dispatch({
                type: 'agent/getList',
                payload: {
                    type: `type=${value}`
                }
            });
        }
    }

    getOnly = async id => {
        await this.props.dispatch({
            type: 'agent/getOnly',
            payload: {
                type: `id=${id}`
            }
        });
    };

    saveOnly = async (body, id) => {
        await this.props.dispatch({
            type: 'agent/saveOnly',
            payload: {
                body,
                id
            }
        });
    };

    searchChange(e) {
        this.setState({ searchValue: e.target.value });
    }

    selectChange = e => {
        const value = e.target.getAttribute('value');
        this.setState({ filterType: value });
        this.getFliterList(value);
    };

    layoutChange = e => {
        this.setState({ layoutType: e.target.getAttribute('value') });
    };

    delResource = async (id, i) => {
        await this.getOnly(id);
        let { item } = this.props;
        item.resources.splice(i, 1);
        await this.saveOnly(item, id);
        this.getFliterList(this.state.filterType);
    };

    addResource = async (value, id) => {
        await this.getOnly(id);
        let { item } = this.props;
        item.resources.push(value);
        await this.saveOnly(item, id);
        this.getFliterList(this.state.filterType);
    };

    render() {
        const { list } = this.props;
        const { searchValue, filterType, layoutType } = this.state;
        const filterStatusArr = getFilterLength('status', list);
        const filterTypeArr = getFilterLength('type', list);
        return (
            <div className="agent">
                <div className="agent-overview">
                    <div className="building">
                        <span>Building</span>
                        <span className="icon icon-cog" />
                        <span className="num">
                            {filterStatusArr('building')}
                        </span>
                    </div>
                    <div className="idle">
                        <span>Idle</span>
                        <span className="icon icon-coffee" />
                        <span className="num">{filterStatusArr('idle')}</span>
                    </div>
                    <div className="all">
                        <div>
                            <span>All</span>
                            <span>{list.length}</span>
                        </div>
                        <div>
                            <span>PHYSICAL</span>
                            <span>{filterTypeArr('physical')}</span>
                        </div>
                        <div>
                            <span>VIRTUAL</span>
                            <span>{filterTypeArr('virtual')}</span>
                        </div>
                    </div>
                </div>

                <div className="agent-select">
                    <SelectGroup
                        onClick={this.selectChange}
                        className="btn-group"
                        activeClass="btn-active"
                        value={filterType}
                    >
                        <span className="test" value="all">
                            All
                        </span>
                        <span value="physical">PHYSICAL</span>
                        <span value="virtual">VIRTUAL</span>
                    </SelectGroup>
                    <div className="search-box">
                        <span
                            style={{ opacity: !searchValue ? 1 : 0 }}
                            className="icon-search"
                        />
                        <input
                            type="text"
                            value={searchValue}
                            onChange={this.searchChange.bind(this)}
                        />
                    </div>
                    <SelectGroup
                        onClick={this.layoutChange}
                        className="layout-change"
                        activeClass="layout-active"
                        value={layoutType}
                    >
                        <span value="card" className="icon-th-card" />
                        <span value="list" className="icon-th-list" />
                    </SelectGroup>
                </div>

                <Item
                    data={list}
                    delResource={this.delResource}
                    addResource={this.addResource}
                />
            </div>
        );
    }
}
